<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
        <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/common1.js"></script>
<script type="text/javascript">
function preview(file){
    var prevDiv = document.getElementById('photo');
    if (file.files && file.files[0]){
      var reader = new FileReader();  //用来读取文件的模型
      reader.onload = function(evt){  //处理读取的文件
        prevDiv.innerHTML = '<img src="' + evt.target.result + '" style="width:50px;height:50px;" class="img-circle"/>';
      }
      reader.readAsDataURL(file.files[0]);//读取图像文件
    }else{
      prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
    }
  }
</script>
</head>
<body>
<div style="width:700px;margin-left:250px;margin-top:20px;">
<div class="panel panel-default">
  <div class="panel-heading">头像</div>
  <div class="panel-body">
    <img src="${userInfo.photo}" alt="touxiang" class="img-circle" height="50px" width="50px;">
  </div>
  <div class="panel-heading">用户账号</div>
  <div class="panel-body">
    ${userInfo.uaccount }
  </div>
  <div class="panel-heading">昵称</div>
  <div class="panel-body">
    ${userInfo.uname }
  </div>
  <div class="panel-heading">个性签名</div>
  <div class="panel-body">
    ${userInfo.uremake}
  </div>
  <div class="panel-heading">性别</div>
  <div class="panel-body">
    ${userInfo.sex}
  </div>
  <div class="panel-heading">账户余额</div>
  <div class="panel-body">
    ${userInfo.umoney}
  </div>
  <div class="panel-heading">积分余额</div>
  <div class="panel-body">
    ${userInfo.integral}
  </div>
  <div class="panel-heading">手机号</div>
  <div class="panel-body">
    ${userInfo.phone}
  </div>
  <div class="panel-heading">邮箱</div>
  <div class="panel-body">
    ${userInfo.email}
  </div>
</div>
  <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">修改个人信息</button>
  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal1">修改登陆密码</button>
  <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal2">修改支付密码</button>
</div>


   <!-- 修改信息模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">修改信息：</h4>
      </div>
      
      <!-- 模态框内表单 -->
  <form class="form-horizontal" role="form" action="updateUserInfo.do" method="post" enctype="multipart/form-data">
  <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">头像</label>
  <div id="photo">
  <img src="${userInfo.photo}" alt="touxiang" class="img-circle" height="50px" width="50px;">
  </div>
    <div class="col-sm-10" style="margin-left:100px;">
      <input type="file" id="exampleInputFile" onchange="preview(this)" name="photo1">
    </div>
  </div>
  <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">用户账号</label>
    <div class="col-sm-8">
      <input class="form-control" id="disabledInput"  type="text" value="${userInfo.uaccount}" name="uaccount" disabled>
    </div>
  </div>
  <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">昵称</label>
    <div class="col-sm-8">
      <input class="form-control" id="focusedInput" type="text" value="${userInfo.uname}" name="uname">
    </div>
  </div>
  <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">个性签名</label>
    <div class="col-sm-8">
      <input class="form-control" id="focusedInput" type="text" value="${userInfo.uremake}" name="uremake">
    </div>
  </div>
  <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">性别</label>
    <div class="col-sm-8">
      <input class="form-control" id="focusedInput" type="text" value=" ${userInfo.sex}" name="sex">
    </div>
  </div>
  <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">账户余额</label>
    <div class="col-sm-8">
      <input class="form-control" id="disabledInput" type="text" value="${userInfo.umoney}" name="umoney" disabled>
    </div>
  </div>
  <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">积分余额</label>
    <div class="col-sm-8">
      <input class="form-control" id="disabledInput" type="text" value="${userInfo.integral}" name="integral" disabled>
    </div>
  </div>
  <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">手机号</label>
    <div class="col-sm-8">
      <input class="form-control" id="focusedInput" type="text" value=" ${userInfo.phone}" name="phone" disabled>
    </div>
  </div>
  <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
    <div class="col-sm-8">
      <input class="form-control" id="focusedInput" type="text" value="${userInfo.email}" name="email">
    </div>
  </div>

       
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <input type="submit" class="btn btn-primary"  value="提交">      <!-- form表单提交时不能有data-dismiss="modal"属性 -->
      </div>
      </form>
    </div>
  </div>
</div>
 <!-- 修改登陆密码模态框 -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">修改密码：</h4>
      </div>
      <div class="modal-body">
          <form class="form-horizontal" role="form">
          <div class="form-group has-warning" >
            <label class="col-sm-2 control-label">提示：</label>
            <div class="col-sm-10">
            <p class="form-control-static">请输入新密码</p>
            </div>
         </div>
         <div class="form-group has-warning">
           <label for="inputPassword" class="col-sm-2 control-label">新密码：</label>
           <div class="col-lg-7">
           <input type="text" class="form-control" id="newPassword" placeholder="密码">
           </div>
         </div>
         </form>        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="updatePassword()" data-toggle="modal" data-target="#passwordResult">提交</button>
      </div>
    </div>
  </div>
</div>
<!-- 修改登陆密码结果模态框 -->
<div class="modal fade bs-modal-sm" id="passwordResult" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">提示信息：</h4>
      </div>
      <div class="modal-body" v-if="show">
                登录密码修改成功！
      </div>
      <div class="modal-body" v-else>
                 登录密码修改失败！
      </div>
    </div>
  </div>
</div>

 <!-- 修改支付密码模态框 -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">修改支付密码：</h4>
      </div>
      <div class="modal-body">
          <form class="form-horizontal" role="form">
          <div class="form-group has-warning" >
            <label class="col-sm-3 control-label">提示：</label>
            <div class="col-sm-7">
            <p class="form-control-static">请输入新密码（只能是纯数字）</p>
            </div>
         </div>
         <div class="form-group has-warning">
           <label for="inputPassword" class="col-sm-3 control-label">新支付密码：</label>
           <div class="col-lg-7">
           <input type="text" class="form-control" id="newPayPassword" placeholder="支付密码">
           </div>
         </div>
         </form>        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="updatePayPassword()" data-toggle="modal" data-target="#payPasswordResult">提交</button>
      </div>
    </div>
  </div>
</div>
<!-- 修改支付密码结果模态框 -->
<div class="modal fade bs-modal-sm" id="payPasswordResult" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">提示信息：</h4>
      </div>
      <div class="modal-body" v-if="payshow">
                支付密码修改成功！
      </div>
      <div class="modal-body" v-else>
                 支付密码修改失败！
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">

//修改登录密码
var pwdVue=new Vue({
	el:'#passwordResult',
	data:{
		show:'',
	}
});
function updatePassword(){
	var newPassword=$("#newPassword").val;
	$.ajax({
		url:'updatePassword.do',
		data:{newPassword:newPassword},
		type:'post',
		dataType:'json',
		success:function(result){
			pwdVue.show=result;
		}
	});
}
//修改支付密码
var payPwdVue=new Vue({
	el:'#payPasswordResult',
	data:{
		payshow:'',
	}
});
function updatePayPassword(){
	var newPayPassword=$("#newPayPassword").val;
	$.ajax({
		url:'updatePayPassword.do',
		data:{newPayPassword:newPayPassword},
		type:'post',
		dataType:'json',
		success:function(result){
			payPwdVue.payshow=result;
		}
	});
}
</script>
</html>